import { useState } from 'react'
import './styleLogin.scss'
import { WechatFilled, WechatWorkOutlined, QqOutlined, MobileOutlined, MailOutlined } from '@ant-design/icons'
import { QRCode, Input, Button, Form } from 'antd'
import type { FormProps } from 'antd'; //引入antd库

import phoneLogin from '../../../public/loginImg/phone.jpg'
import codeLogin from '../../../public/loginImg/code.jpg'
import hua from '../../../public/loginImg/hua.jpg'
import axios from 'axios';
type FieldType = {
    username?: string;
    password?: string;

};
interface LoginPopupProps {
    onLoginSuccess?: () => void;

    // 登录成功回调函数
}
function LoginPopup({ onLoginSuccess }: LoginPopupProps) {
    const [isPhoneLogin, setIsPhoneLogin] = useState(false);

    // 切换登录方式
    const toggleLoginMethod = () => {
        setIsPhoneLogin(!isPhoneLogin);
    };


    // 手机号：13123456789 密码:123456
    const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
        console.log('Success:', values);
        //登录接口
        try {
            const res = await axios.post('http://localhost:3000/api/login', values)
            console.log('登录', res)

            // 计算过期时间（假设后端返回expiresIn是秒数）
            const expireTime = Date.now() + res.data.expiresIn * 1000;
            localStorage.setItem('tokenExpire', expireTime.toString());

            // 存储token
            localStorage.setItem('token', res.data.token)
            //存储refreshToken
            localStorage.setItem('refreshToken', res.data.refreshToken);
            //存储用户信息
            localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo));

            // localStorage.setItem('tokenExpire', expireTime.toString());
            // 触发登录成功回调
            if (onLoginSuccess) {
                onLoginSuccess();

            }
        } catch (error) {
            console.error('登录失败:', error);
        }

    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };


    return (
        <div className="login-container">
            {/* 左侧品牌介绍 */}
            <div className="brand-section">
                <img src="https://cdn.dancf.com/fe-assets/20231008/login-img/eaf366ea72a854facf04ebc6bbb48390.png" alt="" />
            </div>

            {/* 右侧登录区域 */}
            <div className="login-section">
                {/* 图片切换按钮 */}
                <div className="login-method-switcher">
                    <img
                        src={isPhoneLogin ? phoneLogin : codeLogin}
                        alt="切换登录方式"
                        onClick={toggleLoginMethod}
                    />
                </div>
                <button className="phone-login-btn" onClick={toggleLoginMethod}>
                    {isPhoneLogin ? '微信扫码登录' : '手机号登录'}
                </button>

                {isPhoneLogin ? ( // 手机号登录表单

                    <div className="phone-login-form">
                        <div className="phone-header">
                            <h3><span>手机密码</span>登录</h3>

                        </div>
                        <Form

                            name="basic"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item<FieldType>
                                style={{ marginLeft: "80px" }}
                                name="username"
                                rules={[{ required: true, message: '输入手机号码' }]}
                            >
                                <Input placeholder='输入手机号码' style={{ width: '260px', height: "40px" }} />
                            </Form.Item>

                            <Form.Item<FieldType>
                                style={{ marginLeft: "80px" }}
                                name="password"
                                rules={[{ required: true, message: '输入6-30位密码' }]}
                            >
                                <Input placeholder='输入6-30位密码' style={{ width: '260px', height: "40px" }} />
                            </Form.Item>



                            <Form.Item label={null} style={{ marginRight: "100px" }}>
                                <Button type="primary" htmlType="submit" block style={{ width: '260px', height: "40px" }}>
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                        <div className="extra-links">
                            <a>手机验证码登录</a>
                            <a>忘记密码</a>
                        </div>
                    </div>


                ) : (
                    <div className="wechat-login">
                        <div className="scan-header">
                            <h3><span>微信扫码</span>一键登录</h3>
                            <small>未注册的微信号将自动创建稿定账号</small>
                        </div>
                        <div className="qrcode-placeholder">
                            <QRCode type="canvas" value="https://ant.design/" />
                        </div>
                    </div>
                )}


                <div className="other-login">
                    <div className="other-login-string">

                      

                    </div>

                    <div className="login-icons">
                        <span className="loginIcon petal"><img src={hua} alt="" style={{ width: '10px', height: '10px' }} />花瓣授权</span>
                        <span className="loginIcon mobile"><MobileOutlined />手机</span>
                        <span className="loginIcon qq" onClick={() => setIsPhoneLogin(!isPhoneLogin)}>
                            {isPhoneLogin ? (
                                <>
                                    <WechatFilled />
                                    <span>微信</span>
                                </>
                            ) : (
                                <>
                                    <QqOutlined />
                                    <span>QQ</span>

                                </>
                            )}
                        </span>
                        <span className="loginIcon enterprise"><WechatWorkOutlined />企业</span>
                        <span className="loginIcon email"><MailOutlined />邮箱</span>
                    </div>
                </div>

                <div className="agreement">
                    <div className="text">
                        您登录即同意
                        <span className="links">
                            <a>用户服务协议</a>，<a>隐私政策</a>和<a>授权许可协议</a>
                            如您成为稿定设计会员，成为会员即视为同意<a>会员服务协议</a>
                        </span>

                    </div>

                    <div className='register'>
                        <div className="register-btn">手机号注册</div>
                    </div>

                </div>


            </div>
        </div>
    )
}

export default LoginPopup